<template>
  <view>
    <view class="container">
      <u-navbar title="发布视频" title-size="36"></u-navbar>
      <!-- <view class="content">
				<view class="">
					<view class="">
						视频封面<text style="font-size: 24rpx;color:#F54831"> (推荐封面长宽比9:16）</text>
					</view>
					<u-upload ref="uUpload" upload-text="选择封面" :action="action" ></u-upload>
				</view>
			</view> -->

      <view class="view-bar">
        <view class="view-item1" @click="recordVideo">
          <text class="need">*</text>
          <p v-if="form.playUrl">已选中视频</p>
          <p v-else>
            上传视频<text style="font-size: 24rpx; color: #f54831"> (建议上传文件不超过100M）</text>
          </p>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
      </view>

      <view class="top">
        <p class="video-title">视频描述</p>
        <textarea
          v-model="form.title"
          class="text-area"
          name=""
          placeholder="请输入描述(5-48个字)"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </view>

      <view class="view-bar">
        <view class="view-item1" @click="onPicker('region')">
          <p>我的位置</p>
          <text v-if="region">{{ region.city.label + region.area.label }}</text>
          <text v-else style="color: #999999">选择位置</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <view class="view-item1" @click="bindGoods">
          <p>关联商品</p>
          <text v-if="rangeValue">{{ rangeValue.label }}</text>
          <text v-else style="color: #999999">关联商品</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
      </view>
    </view>

    <view v-if="goodsInfo" class="view-bar">
      <view
        class="goods-list-box"
        v-for="(item, index) in itemList[0]"
        :key="index"
        @click="routeTo()"
      >
        <view class="gods-img-box">
          <!-- <image class="goods-img" src="../../static/gui.png" mode=""></image> -->
        </view>
        <view class="goods-dsce">
          <view class="goods-title-tip">
            <text>商品名称商品名称</text>
          </view>
          <view class="goods-price-info">
            <text class="price_main">¥12.00</text>
            <button>选择关联</button>
          </view>
        </view>
      </view>
    </view>

    <view class="floor-tip">
      <u-icon name="/static/img/选择2.png" size="35"></u-icon>
      <text>我已阅读并同意</text>
      <text style="color: #f54831">《视频带货发布协议》</text>
    </view>
    <view @click="submit" class="submit-btn btn"> 立即发布 </view>
    <view v-show="false" class="">
      <video class="video" src=""></video>
      <canvas class="canvas"></canvas>
    </view>

    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      range-key="label"
    ></u-picker>
  </view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js'
import { BASE_URL, UP_URL } from '../../common/config'

export default {
  data() {
    return {
      mode: 'selector',
      show: false,
      checked: false,
      rangeValue: '',
      region: '',
      range: [
        {
          label: '选择视频',
          id: 1
        },
        {
          label: '录制视频',
          id: 2
        }
      ],
      action: BASE_URL + UP_URL,
      fileList: [],
      videoSrc: '',
      form: {
        playUrl: '',
        coverUrl: 'xzx',
        title: '',
        privacy: false,
        latitude: '',
        longitude: '',
        cityId: '',
        spuId: ''
      },
      goodsInfo: ''
    }
  },
  methods: {
    confirmSelctor(e) {
      if (this.mode == 'selector') {
        //this.rangeValue = this.range[e]
        if (e == 0) {
          this.recordVideo('')
        } else {
          this.recordVideo()
        }
      } else {
        this.region = e
        this.form.cityId = e.city.value
      }
    },
    onPicker(e) {
      this.mode = e
      this.show = true
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },

    recordVideo() {
      uni.chooseVideo({
        //, 'camera'
        //maxDuration: 120,
        sourceType: ['album'], // 指定使用摄像头录像
        camera: 'back', // 指定使用后置摄像头，可选值有front、back
        // 最大录制时长（秒）
        success: (res) => {
          // 获取视频录制文件的临时路径
          console.log('录制的视频文件路径:', res.tempFilePath)
          uni.showLoading({
            title: '上传中...'
          })
          uploadFiles(res.tempFilePath)
            .then((res2) => {
              this.form.playUrl = res2.data
              this.getVideoBase64(res2.data)
            })
            .finally(() => {
              uni.hideLoading()
            })
          // 可以在这里处理视频文件，例如上传到服务器
        },
        fail: (err) => {
          uni.showModal({
            title: '未选择视频'
          })
        }
      })
    },
    submit() {
      // this.$refs.uUpload.lists.forEach(val => {
      // 	this.form.coverUrl = val.response.data
      // })

      if (this.form.playUrl == '') {
        this.$u.toast('请选择视频')
        return
      }

      // if(this.form.coverUrl == ""){
      // 	this.$u.toast("请选择封面")
      // 	return
      // }
      // if(this.form.detailAddress == ""){
      // 	this.$u.toast("请输入详细地址")
      // 	return
      // }

      // if(this.area == ""){
      // 	this.$u.toast("选择选择经营地址")
      // 	return
      // }
      this.form.spuId = this.goodsInfo.id
      this.$u.post('/app-api/vlog/info/create', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          try {
            uni.navigateBack()
          } catch (e) {
            // #ifdef MP-WEIXIN
            uni.switchTab({
              url: '/pages/video-home/video-home'
            })
            // #endif
          }
        }, 800)
      })
    },
    bindGoods() {
      uni.$on('goodsInfo', (cb) => {
        this.goodsInfo = cb
        uni.$off('goodsInfo')
      })
      uni.navigateTo({
        url: '/other_center/video-bind-goods/video-bind-goods'
      })
    },
    onSee() {
      uni.navigateTo({
        url:
          '/other/video-play/video-play?videoList=' +
          JSON.stringify([this.form.playUrl]) +
          '&play=' +
          JSON.stringify(this.form.playUrl)
      })
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);

page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}

.top {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
}
.video-title {
  margin-bottom: 15rpx;
}
.text-area {
  width: 100%;
  height: 120rpx;
  background-color: #f2f2f2;
}

.need {
  color: red;
}

.view-item1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #ededed;
}

.view-item1 p {
  flex: 1;
}

.view-item1 .title {
  flex: 2;
}

input {
  flex: 8;
}

.view-bar {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.floor {
  padding: 20rpx;
  background-color: #fff;
}

.content {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.btn {
  margin-left: 20rpx;
}

.goods-list-box {
  display: flex;
  height: 200rpx;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 12rpx;
  border-bottom: 2rpx solid #ededed;
}

.goods-img-box {
  flex: 3;
  width: 230rpx;
  padding: 30rpx;
}
.goods-img {
  width: 160rpx;
  height: 160rpx;
}
.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.goods-title-tip {
  flex: 7;
}

.goods-price-info {
  display: flex;
  margin-top: 50rpx;
}

.price_main {
  flex: 1;
  font-size: 26rpx;
  color: #ff3636;
}

.goods-price-info button {
  font-size: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 30rpx;
  background-color: #0f76bc;
  color: #ffffff;
}
</style>
